<template>
    <div>
        <el-dialog title="添加虚拟评论" :visible.sync="formList.dialogFormVisible">
            <el-form :model="formList"  ref="formList">
                <el-form-item label="商品" prop="image" :label-width="formLabelWidth">
                    <div class="avatar-uploader1" @click="imgListFun">
                        <img class="img1" v-if="formList.image.image" :src="formList.image.image">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                </el-form-item>
                <el-form-item label="用户头像" prop="pics" :label-width="formLabelWidth">
                   <div class="avatar-uploader1" @click="imglistFun">
                        <img class="img1" v-if="formList.pics[0]" :src="formList.pics[0]">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                </el-form-item>
                <el-form-item label="用户名称" prop="nickname" :label-width="formLabelWidth">
                    <el-input v-model="formList.nickname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评价文字"  prop="comment" :label-width="formLabelWidth">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="formList.comment">
                </el-input>
                </el-form-item>
                <el-form-item label="商品分数"  prop="product_score" :label-width="formLabelWidth">
                    <el-rate v-model="formList.product_score"></el-rate>
                </el-form-item>
                <el-form-item label="服务分数" prop="service_score" :label-width="formLabelWidth">
                    <el-rate v-model="formList.service_score"></el-rate>
                </el-form-item>
                <el-form-item label="评价图片" prop="avatar" :label-width="formLabelWidth">
                    <div class="avatar-uploader1" @click="imglistFun1">
                        <img class="img1" v-if="formList.avatar" :src="formList.avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="quFun">取 消</el-button>
                <el-button type="primary" @click="submitForm('formList')">确 定</el-button>
                <el-button @click="resetForm('formList')">重置</el-button>
            </div>
        </el-dialog>
        <!-- 商品 -->
        <Uplist :list-forms="dialogForm" @listS='listSFun' @listT="listTFun"></Uplist>
        <!--用户头像和评价图片-->
        <ImgDiv :is-showt='zhe' @isShowS="isShowSFun" @imgArr="imgArrFun" @imgArr1="imgArr1Fun"></ImgDiv>
    </div>
</template>
<script>
import{addlist} from '../api/index'
import Uplist from '../components/uplist'
import ImgDiv from '../components/imgDiv'
export default {
    components:{
        Uplist,
        ImgDiv
    },
    props:['formList'],
    data() {
        return {
            formLabelWidth: '120px',
            dialogForm:false,
            zhe:{
                isShow:false,
                titlet:'',
                imgArr:[]
            }
        }
    },
    created(){
    },
    methods: {
        // 返回用户头像
        imgArrFun(val){
            this.zhe.isShow=val.isShow
            this.formList.pics=val.imgArr
        },
        // 返回评价图片
        imgArr1Fun(val){
            this.zhe.isShow=val.isShow
            this.formList.avatar=val.imgArr[0]
        },
        // 返回用户头像和评价图片点击别的地方关闭页面
        isShowSFun(val){
            this.zhe.isShow=val
        },
        // 用户头像
        imglistFun(){
            this.zhe.imgArr=[]
            this.zhe.isShow=true
            this.zhe.titlet='请选择用户头像'
        },
        // 评价图片
        imglistFun1(){
            this.zhe.imgArr=[]
            this.zhe.isShow=true
            this.zhe.titlet='请选择评价图片'
            
        },
        // 商品回调
        listSFun(val){
            this.dialogForm=val.listForms
        },
        // 选中商品回调
        listTFun(val){
            console.log(val);
            this.dialogForm=val.listForms
            this.formList.image.image=val.row.image
            this.formList.image.product_id=val.row.id
            console.log(this.formList.image);
        },
        // 点击商品出现商品分类遮罩层
        imgListFun(){
            this.dialogForm=true
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 取消
        quFun(){
            this.formList.dialogFormVisible=false
        },
        // 确定
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addlist({
                        comment:this.formList.comment,
                        nickname:this.formList.nickname,
                        product_score:this.formList.product_score,
                        service_score:this.formList.service_score,
                        avatar:this.formList.avatar,
                        pics:this.formList.pics,
                        image:this.formList.image
                    }).then((res)=>{
                        if(res.data.status==200){
                            this.$message({
                                message: res.data.msg,
                                type: 'success',
                                duration:1000
                            });
                            this.formList.dialogFormVisible=false
                            this.$emit('addlist',this.formList.dialogFormVisible)
                        }else{
                            this.$message({
                                message: res.data.msg,
                                type: 'error',
                                duration:1000
                            });
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
         // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>
<style lang="scss" >
.avatar-uploader1{
    width: 80px;
    height: 80px;
    border: 1px dashed #ccc;
    border-radius: 6px;
}
.avatar-uploader1:hover{
        border-color: #409EFF;
    }
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--picture-card{
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .img1{
      width: 100%;
      height: 100%;
      display: block;
  }
</style>